import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';

import { SkWebService } from '@service/skweb.service';

@Component({
  selector: 'app-alldapp',
  templateUrl: './allapp.component.html',
  styleUrls: ['./allapp.component.less'],
})
export class AllAppComponent implements OnInit {
  public selectAppInfo: any = {}; // 传给父组件的某个app信息
  public operate: string;  // 当前打开appDetail的操作(新建还是修改)
  public applist: any[] = [];
  public dataTotal = 1;  // 数据总量
  public pageIndex = 1;  // 页码
  public pageSize = 10;  // 每页数量

  public loading = false; // 数据加载loading
  public disabledButton = true; // 是否隐藏删除按钮选项
  public selectNumber = 0; // 选择数量
  public allChecked = false;  // 是否全部选中
  public indeterminate = false;  // checkbox不确定状态

  public keyword;  // 模糊查询内容
  public selectList = {}; // 选中的列表(记录动态分页的选中的列表)

  public isVisible = false; // app详情页modal是否打开
  public modalTitle; // app详情框标题

  // app类型
  public appTypeList = [
    { label: '行情', value: 'marketAppList' },
    { label: '新品', value: 'gameNewAppList' },
    { label: '热门', value: 'gameHotAppList' },
    { label: '群组', value: 'hotTgGroup' },
    { label: '工具', value: 'toolsAppList' }
  ];

  constructor(
    public msg: NzMessageService,
    private skWebService: SkWebService
  ) { }

  public ngOnInit() {
    this.fetchAppList();
  }

  // 查询app列表
  public async fetchAppList(reset: boolean = false) {
    if (reset) {
      this.pageIndex = 1;
      this.keyword = null;
    }
    this.isVisible = false;
    this.loading = true;
    // 特殊处理, 根据类型名称查询(以后扩展需直接读取数据库)
    let keyword = this.keyword ? this.keyword.trim() : null;
    this.appTypeList.map(val => {
      if (keyword === val.label) {
        keyword = val.value;
      }
    });

    const ret = await this.skWebService.fetchThirdPartyApp({
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      keyword: keyword
    });
    if (ret && ret.errcode === 0) {
      const { count, rows } = ret.data;
      this.dataTotal = count;  // 数据总数
      this.applist = rows; // 数据

      // 修改checkbox状态
      // 将已选中的选项修改显示选中状态
      this.applist.forEach(data => data.checked = this.selectList[data.appName]);
      if (this.applist.length > 0) {
        // 判断是否全部选中或者是否全部未选中
        const allChecked = this.applist.every(value => this.selectList[value.appName] === true);
        const allUnChecked = this.applist.every(value => !this.selectList[value.appName]);

        // 修改全部选择状态
        this.allChecked = allChecked;
        this.indeterminate = (!allChecked) && (!allUnChecked);
      } else {
        this.allChecked = false;
        this.indeterminate = false;
      }
    }
    this.loading = false; // 关闭数据加载loading
  }

  // 删除dapp
  public async deleteAppList() {
    this.loading = true;  // 数据加载loading
    const appNameList = [];
    // 统计选中状态下的数据
    // tslint:disable-next-line:forin
    for (const key in this.selectList) {
      if (this.selectList[key]) {
        appNameList.push(key);
      }
    }
    // 若无选中的数据, 不触发api
    if (appNameList.length <= 0) {
      return;
    }

    const ret = await this.skWebService.deleteThirdPartyApp(appNameList);
    this.loading = false;
    if (ret && ret.errcode === 0) {
      this.msg.success(`成功删除 ${this.selectNumber} 个app`);
      // 重新创建后清空选中信息, 重置重新创建按钮状态和选中数量
      this.selectList = {};
      this.disabledButton = true;
      this.selectNumber = 0;
      this.pageIndex = 1;
      this.fetchAppList();
    }
  }

  //
  public openAppDetail(appInfo?: any) {
    this.selectAppInfo = appInfo || {};
    this.modalTitle = appInfo ? `${appInfo.appName}详情` : '新的app信息';
    this.operate = appInfo ? 'update' : 'create';
    this.isVisible = true;
  }

  // 删除dapp
  public deleteApp() {
    //
  }

  // 关闭app详情页
  public closeAppDetail() {
    this.isVisible = false;
  }

  //
  public handleConfirm() {
    //
  }

  // 选中全部
  public checkAll(value: boolean): void {
    this.applist.forEach(data => {
      this.selectList[data.appName] = value;
    });
    this.refreshStatus();
  }

  // 更新选中信息
  public refreshStatus() {
    // 判断是否全部选中或者是否全部未选中
    const allChecked = this.applist.every(value => this.selectList[value.appName] === true);
    const allUnChecked = this.applist.every(value => !this.selectList[value.appName]);
    // 修改全部选择状态
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);

    // 统计选中的个数
    let selectNumber = 0;
    // tslint:disable-next-line:forin
    for (const appName in this.selectList) {
      selectNumber += this.selectList[appName] ? 1 : 0;
    }
    // 统计选中的个数
    this.selectNumber = selectNumber;
    // 有选中时显示重新创建的按钮
    this.disabledButton = this.selectNumber ? false : true;
  }
}
